<template>
    <div>
        <el-drawer title="调整产品数据" :visible.sync="drawerState" custom-class="drawer_class" :close-on-press-escape="false"
            :before-close="handleClose"  direction="rtl">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="productTitle" label="产品编号" />
                <el-table-column prop="seriesName" label="系列名称" />
                <el-table-column prop="productName" label="产品名称" >
                    <template #default="scope">
                        <el-input v-model="scope.row.productName" @blur="(ev) => handleBlur(ev, scope.row)"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="productSpec" label="产品规格" />
                <el-table-column prop="masterDrawingCount" label="主图数量" />
                <el-table-column prop="skuCount" label="SKU图数量" />
                <el-table-column prop="detailCount" label="详情图数量" />
                <el-table-column prop="date" label="操作" width="240">
                    <template #default="scope">
                        <div>
                            <el-button type="primary" @click="handleRelease(scope.row)">预发布</el-button>
                            <el-button type="danger" @click="handleDelete(scope.row)">删除产品</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.currentPage"
                :limit.sync="queryParams.pageSize" @pagination="queryProductRecordList" />
        </el-drawer>

        <productDrawer v-if="productStatus" :productId="productId" @close="productStatus = false" />


    </div>
</template>

<script>
import { queryProductRecordList, deleteProductRecordById, updateProductRecord, getProductGoodsData } from "@/api/product/productInfo";
import productDrawer from "./productDrawer.vue";
export default {
    props: {
        drawerItem: {
            type: Object,
            default: {}
        }
    },
    components: {
        productDrawer
    },
    data() {
        return {
            drawerState: true,
            productStatus: false,
            productId: 0,
            tableData: [],
            total: 0,
            queryParams: {
                productName: '',
                id: '',
                currentPage: 1,
                pageSize: 10
            }
        }
    },
    mounted() {
        this.queryProductRecordList()
    },
    methods: {
        queryProductRecordList() {
            this.queryParams.productName = this.drawerItem.productName || ''
            this.queryParams.id = this.drawerItem.id
            queryProductRecordList(this.queryParams).then(res => {
                this.tableData = res.value.list
                this.total = res.value.total
                console.log('res', res);
            })
        },
        handleRelease(row) {
            this.productId = row.id
            this.productStatus = true

        },
        handleDelete(row) {
            this.$confirm(
                '确认删除当前信息吗？',
                "警告",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            ).then(() => {
                deleteProductRecordById(row.id).then(res => {
                    this.$message.success('操作成功')
                    this.queryProductRecordList()
                })
            })
        },
        handleBlur(ev, row) {
            const params = {
                productName: row.productName,
                id: row.id
            }
            updateProductRecord(params).then(res => {
                this.$message.success('修改产品名称成功！')
            })
        },
        handleClose(done) {
            // done();
            this.$emit('close')
        }
    }
}
</script>

<style lang="scss" scope>
.drawer_class {
    width: 70% !important;
    padding: 20px;
}
</style>